<style>
#avatarFileInput {
    border: 2px dashed #bbb;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    font: 20pt bold;
    color: #bbb;
    margin-bottom: 20px;
}
</style>
<div class="modal" id="personalinformations" ng-controller="personalinformationscontroller">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">x</button>
				<h4 class="modal-title">{{ Users_PersonalInformations }}</h4>
			</div>
			<div class="modal-body">
				<div class="container">
					<div>
						<img ng-show="loadingPersonalInformations" style="width:25px;height:25px" alt="{{ Main_Loading }}" src="Resources/Pictures/ajax-loader.gif" />
						<div class="widget-box" id="recent-box" ng-hide="loadingPersonalInformations">
							<div class="widget-body" ng-show="!loadingPersonalInformations">
								<form>
									<div class="row">
										<div class="col-md-2" ng-show="editUserHasAvatar" id="editAvatarFileInput" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragleave(event)"><img ng-src="data:{{ currentUser.AvatarMime }};base64,{{ currentUser.Avatar }}" width="100%" /></div>
										<div class="col-md-2" ng-hide="editUserHasAvatar" id="avatarFileInput" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragleave(event)">Déposez votre avatar ici</div>
										<div class="col-md-10">
											<div class="row form-group">
												<div class="col-xs-4">{{ Users_Fisrtname }} <input ng-model="editUserFirstname" class="form-control" placeholder="{{ Users_Fisrtname }}"/></div>
											</div>
											<div class="row form-group">
												<div class="col-xs-4">{{ Users_Lastname }} <input ng-model="editUserLastname" class="form-control" placeholder="{{ Users_Lastname }}"/></div>
											</div>
											<div class="row form-group">
												<div class="col-xs-4">{{ Users_Email }} <input ng-model="editUserEmail" class="form-control" placeholder="{{ Users_Email }}"/></div>
											</div>
										</div>
										<div class="row form-group">
											<div class="col-xs-5">{{ Users_Company }} <input ng-model="editUserCompany" class="form-control" placeholder="{{ Users_Company }}"/></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-6">{{ Users_PhoneNumber }} <input ng-model="editUserPhoneNumber" class="form-control" placeholder="{{ Users_PhoneNumber }}"/></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-6">{{ Users_WebAddress }} <input ng-model="editUserWebAddress" class="form-control" placeholder="{{ Users_WebAddress }}"/></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-6">{{ Users_Login }} <input ng-model="editUserLogin" class="form-control" placeholder="{{ Users_Login }}"/></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-6">{{ Users_NewPassword }} <input ng-model="newPassword" class="form-control" /></div>
										</div>
									</div>
									<img ng-show="loadingPersonalInformations" desc="banner" style="width:25px;height:25px" alt="{{ Main_Loading }}" src="Resources/Pictures/ajax-loader.gif" />
									<button ng-hide="loadingPersonalInformations" type="button" class="btn btn-primary" ng-click="updateUserCommand()">
										<span class="glyphicon glyphicon-ok"></span> {{ Main_Validate }}
									</button>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<div id="personalInformationsMessage" class="alert alert-{{ messageType }} alert-dismissible" role="alert" ng-show="personalInformationsMessageVisible">
					<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					{{ messageLabel }}
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	var inputElement = document.getElementById("avatarFileInput");
	var editAvatarFileInput = document.getElementById("editAvatarFileInput");
	
	function allowDrop(ev) {
		ev.preventDefault();
		inputElement.style.background = '#E4E4E4';
		editAvatarFileInput.style.background = '#E4E4E4';
	}

	function dragleave(event)
	{
		ev.preventDefault();
		alert('dragleave');
		inputElement.style.background = 'white';
		editAvatarFileInput.style.background = 'white';
	}
	
	function drag(ev) {
		ev.dataTransfer.setData("avatar", ev.target.id);
	} 

	function drop(ev) {
		ev.preventDefault();
		var dt = ev.dataTransfer;
		var files = dt.files;
		if(files.length > 0)
		{
			var firstFile = files[0];
			angular.element(document.getElementById('avatarFileInput')).scope().setAvatarCommand(firstFile);
		}
	}
</script>